<template>
  <Row>
    <Col span="11" style="padding-right: 5px;">
      <Select style="width: 100%" v-model="parent" :clearable="clearable"
              @on-change="(updateChildList() && updateValue())" :disabled="disabled">
        <Option :value="item.k" :key="item.k" v-for="item in parentDictItems">{{ item.v }}</Option>
      </Select>
    </Col>
    <Col span="13" style="padding-right: 5px;">
      <Select style="width: 100%" v-model="child" :clearable="clearable" @on-change="updateValue" :disabled="disabled">
        <Option :value="item.k" :key="item.k" v-for="item in childDictItems">{{ item.v }}</Option>
      </Select>
    </Col>
  </Row>
</template>
<script>
  // import cfs from '@/utils/configs.js'
  export default {
    name: 'DictCascadeSelect',
    props: {
      value: {
        type: [Array],
        default: ['', '']
      },
      parentKind: {
        type: String,
        required: true
      },
      clearable: {
        type: Boolean,
        default: true
      },
      disabled: {
        type: Boolean,
        default: false
      },
      number: {
        type: Boolean,
        default: false
      }
    },
    data () {
      return {
        parent: this.value[0].toString(),
        child: this.value[1].toString(),
        parentDictItems: [],
        childDictItems: []
      }
    },
    mounted () {
      if (this.parentKind === null || this.parentKind === '') {
        return
      }
      this.queryDictItems(this.parentKind, true)
    },
    watch: {
      value (val, oldVal) {
        if (val && val.length === 2) {
          this.parent = (val[0] === null ? '' : val[0].toString())
          this.child = (val[1] === null ? '' : val[1].toString())
        }
      },
      model () {
        this.$emit('input', [this.parent, this.child])
      }
    },
    methods: {
      queryDictItems (key, parent, pid) {
        let storeKey
        if (parent) {
          storeKey = key
        } else {
          storeKey = parent + '_' + pid
        }
        let items = this.$store.state.dicts[storeKey]
        if (items == null || items.list == null) {
          this.$nextTick(function () {
            this.$ajax.get('/api/organization/dict/getDictItems.do', {
              params: {
                kind: key,
                pid: pid
              }
            }).then(response => {
              this.$store.commit('putDictItems', { kind: storeKey, items: response.data })
              if (parent) {
                this.parentDictItems = response.data
              } else {
                this.childDictItems = response.data
              }
            })
          })
        } else {
          if (parent) {
            this.parentDictItems = items.list
          } else {
            this.childDictItems = items.list
          }
        }
      },
      updateChildList () {
        if (this.parent) {
          this.queryDictItems(this.parentKind, false, this.parent)
        } else {
          this.childDictItems = []
          this.child = ''
        }
        return true
      },
      updateValue () {
        this.$emit('input', [this.parent, this.child])
        this.$emit('on-change', [this.parent, this.child])
      }
    }
  }
</script>
